<template>
  <div class="poster-container" :id="id">
    <img :src="formData.images || 'http://recycleimg.feijiu.net/zft/mini/12.png'" class="img-bg" />
    <img src="@/assets/img/poster/mask.png" class="img-mask" />
    <img src="@/assets/img/poster/logo.png" class="img-logo" />
    <img src="@/assets/img/poster/logo-1.png" class="img-logo1" />
    <div class="time">{{ formData.time }}</div>
    <div class="mask"></div>
    <div class="content">
      <div class="title-box">
        <div class="title">{{ formData.title || '请输入' }}</div>
      </div>
      <div class="desc">
        <div class="line">数量 / {{ formData.num || '请输入' }}</div>
        <div class="line">地区 / {{ (formData.address && formData.address.join(' ')) || '请输入' }}</div>
        <div class="line">价格 / {{ formData.guzhi || '请输入' }}</div>
      </div>
      <img v-if="formData.code" :src="formData.code" class="img-code" />
      <div class="code-text" v-else>请上传二维码</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    id: String,
    formData: {
      type: Object,
      default: () => {},
    },
  },
}
</script>
<style scoped lang="scss">
.poster-container {
  width: 750px;
  height: 1624px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background: #ffffff;
  .img-bg {
    width: 750px;
    height: 750px;
  }
  .img-mask {
    width: 750px;
    position: absolute;
    left: 0;
    top: 0;
  }
  .img-logo {
    width: 204px;
    position: absolute;
    left: 40px;
    top: 88px;
  }
  .img-logo1 {
    width: 472px;
    position: absolute;
    left: 40px;
    top: 180px;
  }
  .content {
    position: absolute;
    left: 20px;
    top: 614px;
    width: 710px;
    height: 968px;
    background: url('../../../../assets/img/poster/content.png') no-repeat center 100% / 100%;
    padding-top: 55px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .title-box {
      width: 500px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title {
      width: 500px;
      font-size: 40px;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      color: #161515;
      line-height: 52px;
      text-align: center;
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .desc {
      position: absolute;
      left: 62px;
      top: 172px;
      font-size: 28px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #898989;
      line-height: 40px;
      .line {
        padding-left: 23px;
        margin-bottom: 12px;
        position: relative;
        width: 580px;
        white-space: nowrap; //文本强制不换行；
        text-overflow: ellipsis; //文本溢出显示省略号；
        overflow: hidden; //溢出的部分隐藏；
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 15px;
          width: 8px;
          height: 8px;
          background: #ff9a00;
          border-radius: 50%;
        }
      }
    }
    .img-code,
    .code-text {
      width: 145px;
      height: 145px;
      position: absolute;
      left: 62px;
      bottom: 197px;
      font-size: 20px;
      border: 1px solid #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .mask {
    width: 750px;
    height: 210px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    position: absolute;
    left: 0;
    top: 542px;
  }
}
.time {
  position: absolute;
  left: 40px;
  top: 229px;
  font-size: 24px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 300;
  color: #ffffff;
  line-height: 33px;
  letter-spacing: 8px;
}
</style>
